<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>

    <style>
        .container {
            margin: 0 auto;
            width: 400px;
            text-align: center;
        }

        .container>p {
            color: gray;
        }

        .container .row {
            width: 350px;
            height: 40px;
            margin: 10px auto;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .row>input {
            width: 250px;
            height: 30px;
        }

        .row>#submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交, 会将信息显示在表格中</p>
        <div class="row">
            <span>谁:</span>
            <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span><input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <div class="row">
            <input type="button" value="提交" id="submit">
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        // 查看所有留言
        $.ajax({
            type: "get",
            url: "message",
            success: function (body) {
                console.log(body);
                console.log(typeof (body));
                for (var message of body) {
                    var addE = document.createElement('div');
                    addE.innerText = message.from + "对" + message.to + "说:" + message.message;
                    document.querySelector('.container').appendChild(addE);
                }
            },
            error: function () {
                alert("error");
            }
        });

        var btn = document.querySelector('#submit');

        var fromE = document.querySelector('#from');
        var toE = document.querySelector('#to');
        var sayE = document.querySelector('#say');
        btn.onclick = function () {
            var from = fromE.value;
            var to = toE.value;
            var say = sayE.value;

            console.log(from + "对" + to + "说:" + say);

            fromE.value = "";
            toE.value = "";
            sayE.value = "";

            $.ajax({
                type:"post",
                url:"message",
                data:JSON.stringify({
                    from:from,
                    to:to,
                    message:say
                }),
                success:function(){
                    var addE = document.createElement('div');
                    addE.innerText = from + "对" + to + "说:" + say;
                    document.querySelector('.container').appendChild(addE);
                },
                error:function(){
                    alert("error");
                }
            });
        }
    </script>

</body>

</html>